<template>
  <div
    ref="searchRecordListDom"
    class="z-50 animate__animated animate__fadeIn absolute top-5 left-[82px] w-[85.4vw] mt-1 bg-white dark:bg-zinc-800 rounded-sm shadow-lg border border-gray-300 dark:border-zinc-600"
  >
    <ul
      v-show="useHeadrSearchStore.searchHistoryList.length > 0"
      class="max-h-60 overflow-auto z-50 flex flex-wrap p-1"
    >
      <li
        @click.stop="useHeadrSearchStore.userClickRecordActions(item)"
        v-for="(item, index) in useHeadrSearchStore.searchHistoryList"
        :key="index"
        :class="[
          'flex mr-2 h-[25px] mt-1 rounded-sm p-10 dark:bg-zinc-500 bg-gray-300  dark:hover:bg-gray-700 duration-300 cursor-pointer'
        ]"
      >
        <span class="text-sm text-gray-800 dark:text-zinc-200">{{ item }}</span>
        <My-svg-icon
          @click.stop="useHeadrSearchStore.userdeleteSearchRecord(index)"
          class="w-1 h-1 ml-2"
          fillClass="dark bg-zinc-800"
          name="delete"
        ></My-svg-icon>
      </li>
    </ul>
    <Winnow />
  </div>
</template>
<script setup>
//获取headStore
import { onMounted, ref } from 'vue'
import Winnow from '../winnow/index.vue'
import useHeadSearch from '@/store/HeaderSearch/index.js'
const useHeadrSearchStore = useHeadSearch()
const searchRecordListDom = ref(null)

onMounted(() => {
  if (searchRecordListDom) {
    useHeadrSearchStore.searchRecordListDom = searchRecordListDom.value
  }
})
</script>
<style scoped>
/* 主容器样式 */
.search-history {
  position: absolute;
  margin-top: 0.25rem; /* mt-1 */
  width: 85vw; /* w-[85vw] */
  background-color: white; /* bg-white */
  border-radius: 0.75rem; /* rounded-lg */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-lg */
  border: 1px solid #d1d5db; /* border-gray-300 */
}

/* 暗黑模式样式 */
.dark .search-history {
  background-color: #1f2937; /* dark:bg-zinc-800 */
  border-color: #374151; /* dark:border-zinc-600 */
}

/* 列表最大高度与溢出处理 */
ul {
  max-height: 15rem; /* max-h-60 */
  overflow: auto; /* overflow-auto */
}

/* 列表项样式 */
li {
  display: flex;
  align-items: center; /* items-center */
  padding: 0.5rem; /* p-2 */
  cursor: pointer; /* cursor-pointer */
}
</style>
